<template>
  <div class="rt-container mobile-matrix-select">
    <div v-for="(row, rowIndex) in table.rows" class="card" :key="row.id">
      <van-cell class="block-title" :title="row.label" />
      <div class="card-body">
        <template v-if="multiple">
          <van-checkbox-group v-model="dataValue.rows[rowIndex].text" direction="horizontal" @change="handleChange">
            <van-checkbox v-for="col in table.columns" :key="col.id" :name="col.label" shape="square">
              {{ col.label }}
            </van-checkbox>
          </van-checkbox-group>
        </template>
        <template v-else>
          <template v-if="generate">
            <van-radio-group v-model="dataValue.rows[rowIndex].text" direction="vertical" @change="handleChange(row)">
              <template v-for="col in row.cols">
                <van-popover v-model="col.visible" v-if="col.canInput">
                  <van-field
                    v-model="col.columnInput"
                    placeholder="请说明原因"
                    @blur="handleColumnInput(row, col)"
                  ></van-field>
                  <template #reference>
                    <van-radio :name="col.label" @click="handleRadioClick(row, col)">
                      {{ col.label }}
                    </van-radio>
                  </template>
                </van-popover>
                <van-radio :name="col.label" v-else>
                  {{ col.label }}
                </van-radio>
              </template>
            </van-radio-group>
          </template>
          <van-radio-group v-model="dataValue.rows[rowIndex].text" direction="horizontal" @change="handleChange" v-else>
            <van-radio v-for="col in row.cols" :key="col.id" :name="col.label">
              {{ col.label }}
            </van-radio>
          </van-radio-group>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from '../mixin'
import 'vant/lib/cell/style'
import 'vant/lib/cell-group/style'
import 'vant/lib/radio/style'
import 'vant/lib/radio-group/style'
import 'vant/lib/checkbox/style'
import 'vant/lib/checkbox-group/style'
import 'vant/lib/dialog/style'
import 'vant/lib/field/style'

import { Cell, CellGroup, RadioGroup, Radio, Checkbox, CheckboxGroup, Dialog, Field, Popover } from 'vant'

export default {
  name: 'MobileMatrixSelect',
  mixins: [mixin],
  components: {
    VanCell: Cell,
    VanCellGroup: CellGroup,
    VanRadioGroup: RadioGroup,
    VanRadio: Radio,
    VanCheckbox: Checkbox,
    VanCheckboxGroup: CheckboxGroup,
    VanDialog: Dialog.Component,
    VanField: Field,
    VanPopover: Popover
  },
  props: {
    table: {
      type: Object,
      default: () => {}
    },
    multiple: {
      type: Boolean,
      default: false
    },
    generate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 矩阵单选默认数据结构 {"1":"选项1","2":"选项1","3":"选项1","1636537741435":"选项1"}
      // 矩阵多选默认数据结构 {"1":["选项1","选项2","选项3"],"2":["选项1","选项2","选项3"],"3":["选项1","选项2","选项3"]}
      dataValue: {}
    }
  },
  watch: {
    table: {
      handler(value) {
        this.initValue()
      },
      deep: true
    },
    multiple: {
      handler(value) {
        this.initValue()
      }
    }
  },
  created() {
    this.initValue()
  },
  methods: {
    // 初始化矩阵value为二维数组
    initValue() {
      let initValue = {}
      // 如果为多选
      if (this.multiple) {
        this.table.rows.forEach((row, index) => {
          if (this.value[row.id]) {
            initValue[row.id] = this.value[row.id]
          } else {
            initValue[row.id] = new Array()
          }
        })
      } else {
        if (this.value.rows) {
          initValue = this.value
        } else {
          initValue = this.table
        }
      }
      this.dataValue = initValue
      console.log(this.dataValue)
    },
    handleChange(r) {
      console.log(r)
      if (this.generate) {
        for (let c of r.cols) {
          if (c.label === r.text) {
            c.visible = true
          } else {
            c.visible = false
          }
        }
      }
      this.value = this.dataValue
      this.table.rows = this.value.rows
      this.$emit('change', this.value)
    },
    handleClick() {
      this.dataValue.rows.forEach((row) => {
        row.cols.forEach((col) => {
          col.visible = false
        })
      })
    },
    handleColumnInput(row, col) {
      col.visible = false
      for (let r of this.dataValue.rows) {
        if (r.id === row.id) {
          r.colInput = col.columnInput
        }
      }
      this.value = this.dataValue
      this.$emit('change', this.value)
    },
    handleRadioClick(row, col) {
      console.log(row, col)
      col.visible = true
    },
    hanldeInputConfirm(col) {
      console.log(col)
      col.visible = false
    }
  }
}
</script>

<style lang="scss">
.mobile-matrix-select {
  .card {
    background-color: #fafafa;

    .card-body {
      padding: 10px 16px 0;
      margin-bottom: 10px;
    }

    .van-cell-group {
      background-color: transparent;
      margin-bottom: 10px;
    }

    .van-cell {
      background: transparent;
    }

    .block-title {
      .van-cell__title {
        font-weight: bold;
      }
    }
  }

  .van-radio,
  .van-checkbox {
    margin-bottom: 10px;
  }
}
</style>
